import React, { Component } from "react";
import { Card, Form, Input, Cascader, Button, message } from "antd";
import { ArrowLeftOutlined } from "@ant-design/icons";
import PicturesWall from "../../component/uploadPics";
import EditorConvertToHTML from "../../component/wysiwyg";
export default class PdtUpdate extends Component {
  state = {
    detail: "",
    imgs: [],
  };
  //表单提交的函数
  onFinish = (data) => {
    console.log(data);
    message.success("商品添加成功");
  };
  //表单提价失败的函数
  onFinishFailed = () => {
    console.log("fail");
  };
  //编辑器毁掉函数
  callback = (data) => {
    this.setState({ detail: data });
  };
  //图片上传的毁掉函数
  callbackPic = (data) => {
    console.log(data);
    this.setState({
      imgs: data,
    });
  };
  render() {
    //card 嘴上标题
    const title = (
      <span>
        <ArrowLeftOutlined
          style={{
            padding: "0 10px",
            color: "green",
            fontSize: "20px",
            fontWeight: "bold",
          }}
          onClick={() => {
            this.props.history.push("-1");
          }}
        />
        <span>添加商品</span>
      </span>
    );
    //表单项的布局layout
    const layout = {
      labelCol: { span: 2 },
      wrapperCol: { span: 6 },
    };
    //级联选择器配置项
    const options = [
      {
        value: "zhejiang",
        label: "Zhejiang",
        children: [
          {
            value: "hangzhou",
            label: "Hangzhou",
            children: [
              {
                value: "xihu",
                label: "West Lake",
              },
            ],
          },
        ],
      },
      {
        value: "jiangsu",
        label: "Jiangsu",
        children: [
          {
            value: "nanjing",
            label: "Nanjing",
            children: [
              {
                value: "zhonghuamen",
                label: "Zhong Hua Men",
              },
            ],
          },
        ],
      },
    ];
    return (
      <Card title={title}>
        <Form
          {...layout}
          name="basic"
          initialValues={{ remember: true }}
          onFinish={this.onFinish}
          onFinishFailed={this.onFinishFailed}
        >
          <Form.Item
            label="商品名称"
            name="name"
            rules={[{ required: true, message: "请输入商品名称!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="商品描述"
            name="desc"
            rules={[{ required: true, message: "请输入商品描述!" }]}
          >
            <Input.TextArea />
          </Form.Item>
          <Form.Item
            label="商品价格"
            name="price"
            rules={[{ required: true, message: "请输入商品价格!" }]}
          >
            <Input addonAfter="元" />
          </Form.Item>
          <Form.Item
            label="商品分类"
            name="['pCategoryId', 'categoryId']"
            rules={[{ required: true, message: "请选择商品分类!" }]}
          >
            <Cascader
              options={options}
              onChange={() => {
                console.log("jilian");
              }}
              placeholder="Please select"
            />
          </Form.Item>
          <Form.Item label="商品图片" name="imgs">
            <PicturesWall callback={this.callbackPic}></PicturesWall>
          </Form.Item>
          <Form.Item label="商品详情" name="detail" wrapperCol={{ span: 18 }}>
            <EditorConvertToHTML callback={this.callback}></EditorConvertToHTML>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              添加商品
            </Button>
          </Form.Item>
        </Form>
      </Card>
    );
  }
}
